<template>
	<view class="relative history" style="background-color: #F5F5F5;">
		<z-paging unit="rpx" class="normal-paging" v-model="dataList" @query="queryList" safe-area-inset-bottom
			ref="pagingList" :fixed="true">
			<template #top>
				<custom-nav v-bind="navConfig" />
			</template>
			<view class="history-box relative">
				<Item v-for="(item, index) in dataList" :key="index" :item="item" @analysis="(e) => {
					info = e
					isAnalysisList = true
				}" />
			</view>
		</z-paging>
		<!-- 查看详情 -->
		<u-popup :show="isAnalysisList" closeable bgColor="rgb(245, 245, 245)" @close="() => {
			isAnalysisList = false
		}">
			<view class="Grid Grid--center Grid--justifyCenter text-sm" style="padding: 32rpx 0;">{{info.match_date}}
				{{info.match_week}}</view>
			<view style="padding: 10rpx 15rpx;">
				<!-- <scroll-view style="height: 80vh;" scroll-y="true"> -->
				<z-paging unit="px" ref="paging" :fixed="false" :height="zPagingHeight" use-virtual-list
					@query="openAnalysisList">
					<!-- 通过slot="cell"插入列表for循环的cell，slot-scope中提供当前for循环的item和index -->
					<!-- 因字节跳动小程序不支持slot-scope，因此不支持字节跳动小程序 -->
					<view slot="cell" slot-scope="{item,index}">
						<view class="bg-white relative" style="padding: 10rpx 20rpx; border-radius: 10rpx; margin-bottom: 10rpx;">
							<image v-if="item.match_result && item.match_result.ai_res" src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/red-10.png" style="width: 80rpx; height: 80rpx; position: absolute; right: 20rpx; top: 20rpx; z-index: 9;"></image>
							<view class="Grid Grid--center Grid--justifyCenter text-xs" style="color: #999999;">
								<view class="Grid-cell">{{item.competition && item.competition.name}}</view>
								<view>{{item.match_time && item.match_time.substring(10, 16)}}</view>
							</view>
							<view class="relative Grid Grid--1of2 Grid--center" style="padding: 10rpx 0;">
								<view v-if="item.home_team" class="Grid Grid--center Grid-cell"
									style="background-color: #ffffff; border-radius: 20px; justify-content: flex-end; padding-right: 40rpx;">
									<view
										style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;">
										{{item.home_team.team_name}}
									</view>
									<image :src="item.home_team.logo" style="width: 15px; height: 15px;"></image>
								</view>
								<view v-if="item.away_team" class="Grid Grid--center Grid-cell"
									style="background-color: #ffffff; border-radius: 20px; padding-left: 40rpx;">
									<image :src="item.away_team.logo" style="width: 15px; height: 15px;"></image>
									<view
										style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;">
										{{item.away_team.team_name}}
									</view>
								</view>
								<view
									style="position: absolute; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #0DA25F; font-size: 12px; left: 50%; margin-left: -9px;">
									<view>VS</view>
								</view>
							</view>
							<view v-if="item.analysis" class="Grid Grid--center Grid--justifyCenter Grid--1of2 text-xs"
								style="padding: 20rpx 0;">
								<view class="Grid-cell" style="padding: 0 12rpx 0 0;">
									<view class="Grid Grid--justifySpaceBetween"
										:style="{background: item.match_result && item.match_result.ai_res ? '#EC602E' : 'linear-gradient( 90deg, rgba(5,183,103,.2) 0%, rgba(255,204,1,.2) 100%)', borderRadius: '30rpx', padding: '8rpx 20rpx'}">
										<view
											:style="{color: item.match_result && item.match_result.ai_res ? '#ffffff' : '#0DA25F'}">
											胜平负分析</view>
										<view
											:style="{color: item.match_result && item.match_result.ai_res ? '#ffffff' : '#E12424'}">
											{{item.analysis.spf && item.analysis.spf.ai_spf || '/'}}</view>
									</view>
								</view>
								<view v-if="item.analysis" class="Grid-cell" style="padding: 0 0 0 12rpx;">
									<view class="Grid Grid--justifySpaceBetween"
										style="background: linear-gradient( 90deg, rgba(5,183,103,.2) 0%, rgba(255,204,1,.2) 100%); border-radius: 30rpx; padding: 8rpx 20rpx;">
										<view style="color: #0DA25F;">最大可能进球区间</view>
										<view style="color: #E12424;">
											{{item.analysis.ainsmx && item.analysis.ainsmx.min}}-{{item.analysis.ainsmx && item.analysis.ainsmx.max}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import Item from './cps/item.vue'
	import navConfig from './config/navConfig.js'
	import {
		analysis
	} from '@/service/index.js'

	export default {
		name: 'history',
		components: {
			Item
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				token: state => state.login.token
			})
		},
		data() {
			return {
				navConfig,
				dataList: [],
				yearMonthArray: [],
				yearMonthGroupMap: {},
				isAnalysisList: false,
				info: {},
				list: [],
				zPagingHeight: `${uni.getSystemInfoSync().windowHeight - 200}px`,
			}
		},
		created() {

		},
		mounted() {
			this.initData()
		},
		methods: {
			async initData() {
				try {
					this.yearMonthArray = this.getYearMonthArray(2025, 1)
					console.log(this.yearMonthArray)
					this.yearMonthGroupMap = this.groupArrayBySize(this.yearMonthArray, 20)
					console.log(this.yearMonthGroupMap.get(0))
				} catch (error) {}
			},
			async queryList(pageNo, pageSize) {
				console.log(pageNo)
				try {
					this.$refs.pagingList.complete(this.yearMonthGroupMap.get(pageNo - 1) || []);
				} catch (e) {
					// TODO handle the exception
				}
			},
			getYearMonthArray(startYear, startMonth) {
				//获取当前的年月
				var currentDate = new Date();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth() + 1;

				//定义空数组
				var yearMonthArray = [];

				for (var year = startYear; year <= currentYear; year++) {
					//如果是指定年份的那一年，当年的月份从你指定的月份开始，否则的话从1月开始
					var startMonthOfYear = year === startYear ? startMonth : 1;
					//如果是今年，那么今年的最后一个月份就是当下获取的月份，否则改年最后一个是12月
					var endMonthOfYear = year === currentYear ? currentMonth : 12;
					//循环本年的月份放入数组
					for (var month = startMonthOfYear; month <= endMonthOfYear; month++) {
						if (month < 10) {
							month = '0' + month
						}
						month = String(month)
						//拼接成你想要的数组
						yearMonthArray.push({
							text: `${year}年${month}月`,
							value: `${year}-${month}`
						})
					}
				}
				//日期排序（由近及远）
				yearMonthArray.sort((a, b) => {
					return a.date < b.date ? 1 : -1;
				})
				return yearMonthArray
			},
			groupArrayBySize(arr, size) {
				const groupedMap = new Map();
				for (let i = 0; i < arr.length; i += size) {
					const chunk = arr.slice(i, i + size);
					groupedMap.set(i / size, chunk); // 使用组索引作为键
				}
				return groupedMap
			},
			async openAnalysisList(page, limit) {
				const res = await analysis({
					page,
					limit,
					date: this.info.match_date
				})
				if (res.code == 200) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history {
		height: 100%;
	}

	.history-box {
		z-index: 1;

		&>.an-item {
			// margin-bottom: 20rpx;
		}

		&>.an-item:first-child {
			border-radius: 30rpx 30rpx 0 0;
		}
	}
</style>